<template>
	<view class="admin-notice-container">
		<view class="admin-notice-item" v-for="(item,index) in data.notice_label" :key="index" @tap="showPicker(index)">
			<view class="admin-notice-label">
				{{item}}
			</view>
			<input v-if="index!=2" type="text" :placeholder="data.notice_mention[index]" class="admin-notice-value" v-model="data.notice_value[index]" />
			<view v-if="index==2" class="admin-notice-value">{{data.columns[0][data.pickerIndex]}}</view>
		</view>
		<view class="admin-notice-label-container">
			<view class="admin-notice-label-input-container">
				<input type="text" placeholder="请输入标签" v-model="data.labelInput">
				<view @tap="addLabel">添加标签</view>
			</view>
			<view class="admin-notice-label-show-container">
				<view class="admin-notice-label-show-item" v-for="(item,index) in data.labelArr" :key="index">
					<view class="admin-notice-label-show-item-text">
						{{item}}<text style="margin-left: 10rpx;" @tap="removeLabel(index)">X</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	
	<button class="admin-notice-btn" @tap="sendNotice">发布通知</button>
	<u-picker :show="data.pickerShow" :columns="data.columns" @close="cancel" @confirm="confirm" @cancel="cancel" :closeOnClickOverlay="true"></u-picker>
</template>

<script>
	import {reactive} from 'vue'
	import global from '../../config/global.js'
	export default {
		name:'admin-notice',
		setup(){
			let data = reactive({
				notice_label:['标题','发布者','类型','文章URL','截止日期'],
				notice_value:["","","","",""],
				notice_mention:['请输入标题','请输入发布者','','请输入文章URL','截止日期，格式为2023-09-01'],
				columns:[['事务提醒通知','百宝箱','本科生交流','竞赛通知','科创通知','活动实习通知','就业招聘通知']],
				pickerShow:false,
				pickerIndex:0,
				labelArr:[],
				labelInput:''
			})
			
			function sendNotice(){
				let str = data.labelArr[0]
				for(let i=1;i<data.labelArr.length;i++){
					str+=','
					str+=data.labelArr[i]
				}
				uni.request({
					url:global.BASE_URL+'/notice/add',
					method:"POST",
					data:{
						"title":data.notice_value[0],
						"publisher":data.notice_value[1],
						"type":data.pickerIndex,
						"link_url":data.notice_value[3],
						"deadline":data.notice_value[4],
						"label":str
					},
					header:{
						"mytoken":uni.getStorageSync("localtoken")
					},
					success:(res)=>{
						// console.log(res)
						if(res.data.code){
							uni.showModal({
								title:'发布成功',
								content:'还要继续发送吗？',
								success: (res) => {
									if(res.confirm){
										data.notice_value=["","","","",""]
									}else{
										uni.reLaunch({
											url:'/pages/index/index'
										})
									}
								}
							})
						}
					},
					fail:(err)=>{
						console.log(err)
					}
				})
			}
			
			function showPicker(i){
				if(i==2){
					data.pickerShow = true;
				}
			}
			
			function confirm(e){
				data.pickerIndex = e.indexs[0];
				data.pickerShow = false;
			}
			
			function cancel(){
				data.pickerShow = false;
			}
			
			function addLabel(){
				data.labelArr.push(data.labelInput);
			}
			
			function removeLabel(i){
				data.labelArr.splice(i,1);
			}
			
			return {
				data,
				sendNotice,
				showPicker,
				confirm,
				cancel,
				addLabel,
				removeLabel
			}
		}
	}
</script>

<style scoped>
	.admin-notice-container{
		width: 700rpx;
		margin: 10rpx 25rpx;
	}
	
	.admin-notice-item{
		width: 700rpx;
		margin: 20rpx 0;
		display: flex;
	}
	
	.admin-notice-label{
		font-size: 34rpx;
		font-weight: bold;
		width: 140rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align-last: justify;
		text-align: justify;
		text-justify: distribute-all-lines;
	}
	
	.admin-notice-value{
		font-size: 32rpx;
		color: #515151;
		text-align: left;
		min-height: 60rpx;
		line-height: 60rpx;
		width: 470rpx;
		margin: 5rpx 30rpx;
		padding: 5rpx 10rpx;
	}
	
	.admin-notice-radio-container{
		width: 470rpx;
		margin: 5rpx 30rpx;
		padding: 5rpx 10rpx;
		min-height: 60rpx;
		line-height: 60rpx;
	}
	
	.admin-notice-radio{
		margin: 0rpx 0rpx 0rpx 50rpx;
	}
	
	.admin-notice-btn{
		width: 400rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin: 30rpx 175rpx;
		background-color: #9BCDD2;
		color: white;
	}
	
	.admin-notice-label-input-container{
		width: 700rpx;
		height: 80rpx;
		border-radius: 100rpx;
		border: 3rpx solid #9BCDD2;
		display: flex;
	}
	
	.admin-notice-label-input-container input{
		width: 450rpx;
		height: 80rpx;
		padding: 0 25rpx;
		line-height: 80rpx;
		font-size: 35rpx;
	}
	
	.admin-notice-label-input-container view{
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #9BCDD2;
		color: white;
		font-size: 35rpx;
		text-align: center;
		border-bottom-right-radius: 100rpx;
		border-top-right-radius: 100rpx;
	}
	
	.admin-notice-label-container{
		width: 700rpx;
	}
	
	.admin-notice-label-show-container{
		width: 660rpx;
		padding: 15rpx 20rpx;
		display: flex;
		overflow: scroll;
	}
	
	.admin-notice-label-show-item{
		height: 45rpx;
		line-height: 45rpx;
		padding: 0 10rpx;
		background-color: #9BCDD2;
		color: white;
		border-radius: 15rpx;
		margin: 5rpx;
	}
	
</style>
